<template>
  <div>
    <div class="layout-content-breadcrumb">
      <Breadcrumb>
        <Breadcrumb-item>首页管理</Breadcrumb-item>
        <Breadcrumb-item>轮播管理</Breadcrumb-item>
      </Breadcrumb>
    </div>
    <div class="page-content">
      <div class="list-search" @keyup.enter="onSearch">
        <Row type="flex" :gutter="16">
          <Col span="8">
          <hx-input-item label="广告标题">
            <Input type="text" v-model="search.title" placeholder="请输入广告标题">
            </Input>
          </hx-input-item>
          </Col>
          <Col span="8">
          <Button type="primary" @click="onSearch">查询</Button>
          </Col>
        </Row>
      </div>
      <Table :columns="columns" :data="dataSource"></Table>
      <div class="table-paging">
        <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
      </div>
    </div>
  </div>
</template>
<style lang="less">

</style>
<script>
  import api from 'service/banner'
  export default{
    data(){
      return {
        page: 1,
        pageSize: 10,
        totalNumber: 0,
        search: {
          title: ''
        },
        columns: [
          {
            title: '轮播图',
            key: 'cover',
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.cover,
                  alt: params.row.title
                },
                style: {
                  width: '80px',
                  height: 'auto',
                  margin: '5px 0'
                }
              })
            }
          },
          {
            title: '广告标题',
            key: 'title'
          },
          {
            title: '跳转地址',
            key: 'target_destination'
          }
        ],
        dataSource: []
      }
    },
    mounted(){
      this.onPageChange(1)
    },
    methods: {
      onSearch(){
        this.onPageChange(1)
      },
      onPageChange(page){
        this.page = page
        api.getBanner({
          page: page,
          per_page: this.pageSize,
          'title[like]': this.search.title.trim()
        }).then(({data}) => {
          this.dataSource = (data.list || [])
          this.totalNumber = Number(data.total_count)
        })
      }
    }
  }
</script>
